<template>
  <div class="about-summary">
    <div class="banner">
      <img src="@/assets/images/20200401115954178998.png" alt="" />
    </div>

    <div class="company-info">
      <div class="left-sidebar" v-if="route.query.index == 4">
        <h3>公司新闻</h3>
        <ul class="menu">
          <li class="active"></li>
          <li></li>
        </ul>
        <div class="contact-info">
          <div class="contact-item">
            <img
              src="@/assets/images/202004011028126d577b.png"
              alt="咨询热线"
              class="contact-icon"
            />
          </div>
          <div class="contact-item">
            <img
              src="@/assets/images/20200401105022f62918.png"
              alt="邮箱"
              class="contact-icon"
            />
          </div>
        </div>
      </div>
      <div class="main-content">
        <div style="font-size: 14px" class="contactmax">
          <p style="font-weight: bolder; font-size: 18px">
            Contact us 江苏众延汽车服务有限公司
          </p>
          <p>官方客服：400-025-0558</p>
          <p>
            公司主页：<a href="http://www.zhongyanauto.cn"
              >www.zhongyanauto.cn</a
            >
          </p>
          <p>
            公司地址：江苏省南京市江宁区东山街道松风路20号宏茂大厦10层1001室
          </p>
          <p>苏ICP备2024146572号-2</p>
          <p>Copyright @ VillaGrandis All Rights Reserved</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

const newsList = ref([
  {
    title: "安心汽车延保服务",
    description: "为您的爱车提供全方位的保障...",
    image: "@/assets/images/news1.jpg",
  },
  {
    title: "延保期内客户车辆出现故障怎么办？",
    description: "当您的车辆出现问题时，我们提供快速响应服务...",
    image: "@/assets/images/news2.jpg",
  },
  {
    title: "汽车延保该不该买？",
    description: "详细解析汽车延保的优势与必要性...",
    image: "@/assets/images/news3.jpg",
  },
]);
onMounted(() => {
  console.log(route.query.index);
});
</script>
<style scoped lang="scss">
.about-summary {
  .banner {
    img {
      width: 100%; // 示例样式
      height: auto; // 示例样式
    }
  }
  .company-info {
    display: flex;
    padding: 20px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;

    .left-sidebar {
      width: 250px;
      padding: 20px;
      background: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      align-items: center;

      h3 {
        color: rgb(14, 34, 95);
        font-size: 22px;
        font-weight: 700;
      }

      .menu {
        list-style: none;
        padding: 0;

        li {
          padding: 10px 15px;
          cursor: pointer;
        }
      }

      .contact-info {
        .contact-item {
          display: flex;
          align-items: center;
        }
      }
    }

    .main-content {
      flex: 1;
      padding: 0 30px;
      text-align: center;
      .contact-img {
        position: relative;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .contact-info {
        position: absolute;
        right: 30%;
        top: 10%;
        text-align: left;
        font-size: 14px;
      }
      .breadcrumb {
        margin-bottom: 20px;
        display: flex;
        align-items: end;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        padding: 10px;
        h4 {
          color: #333;
          margin: 0;
        }
      }

      .news-list {
        .news-item {
          display: flex;
          margin-bottom: 30px;
          padding: 20px;
          background: #fff;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);

          .news-image {
            width: 200px;
            height: 150px;
            margin-right: 20px;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .news-content {
            flex: 1;
            text-align: left;

            h3 {
              color: #333;
              margin: 0 0 10px;
              font-size: 18px;
            }

            p {
              color: #666;
              margin: 0 0 15px;
              line-height: 1.6;
            }

            .more-link {
              text-align: right;

              span {
                color: #c66b00;
                cursor: pointer;
                &:hover {
                  text-decoration: underline;
                }
              }
            }
          }
        }
      }
      img {
        margin: 0 auto;
        max-width: 100%;
        height: auto;
        display: inline-block;
      }
    }
  }

  .service-features {
    display: flex;
    // gap: 20px;
    // flex-wrap: wrap;
    font-size: 14px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
    padding: 20px;

    .feature_flex {
      display: flex;
      flex-wrap: wrap;
      flex: 1;
      gap: 30px;
      padding-left: 5%;
      padding-right: 5%;
      .feature-item {
        flex: 1 1 calc(50% - 40px);
        min-width: 200px;
        border-radius: 8px;
        padding: 10px;

        p {
          color: #666;
          line-height: 1.6;
          margin: 0;
        }
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .contactmin {
    display: none;
  }
  .contactmax {
    display: block;
  }
}
</style>
